.transition(@pro:background-color,@dur:3s,@fn:ease-in,@delay:.5s){
  -webkit-transition-property: @pro;
  -moz-transition-property: @pro;
  -o-transition-property: @pro;
  transition-property: @pro;

  -webkit-transition-duration: @dur;
  -moz-transition-duration: @dur;
  -o-transition-duration: @dur;
  transition-duration: @dur;

  -webkit-transition-timing-function: @fn;
  -moz-transition-timing-function: @fn;
  -o-transition-timing-function:@fn;
  transition-timing-function: @fn;

  -webkit-transition-delay: @delay;
  -moz-transition-delay: @delay;
  -o-transition-delay: @delay;
  transition-delay: @delay;
}


#pages {
  width:100%;
  heigt:100%;
}

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color:white;
  z-index: 1;
}

.page img{
  width: 100%;
  height: 100%;
}

.page1{
  background: blue;
  display: block;
  z-index: 100;
}

.page2{
  background: red;

}

.page3{
  background: yellow;
}

.page4{
  background: #AA22FF;
}

.page5{
  background: #ff050e;
}

.page6{
  background: #999999;
}

.page7{
  background: #444400;
}

.page8{
  background: #267DB7;
}

.page9{
  background: #ffcc80;
}
.hide {
  z-index:99;
}
.show {
  z-index: 100;
}

.upicon {
  width:60px;
  height:60px;
  position: absolute;
  left: 50%;
  bottom:20px;
  margin-left: -30px;
  z-index: 1000;
}

.upicon img{ width: 60px;}

#audioPlay {
  width:38px;
  height: 38px;
  background-image: url("../images/music_play.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 9999999;
}